/*
 * @Description: 
 * @Author: 葛玉根
 * @Date: 2021-02-25 17:40:25
 * @LastEditTime: 2021-02-27 08:15:42
 * @LastEditors: Zhang Zhaoda
 */
import { FC, useState } from "react"
import style from '../css/index.module.scss'
import { bindActionCreators } from 'redux'
import { useDispatch, useSelector } from 'react-redux'
import * as allDis from '../../../store/actions/imgActions'
import { stateType } from '../../../store/reducers/imgReducer'
import { getAllClickDataItemType } from '../../../store/types/imgType'
// import LazyLoad from 'react-lazyload';
import SwiperImg from './SwiperImg'
import srcs from '../img/a.jpg'
import Loazing from './Loazing'
interface Iprops {
    IN:(index:number)=>void
}
interface reducerName {
    imgReducer: stateType
}

let AllImg: FC<Iprops> = function (props) {
    const { getAllClickData, swFlag} = useSelector((reducers: reducerName) => reducers.imgReducer)
    const dispatch = useDispatch()
    const dis = bindActionCreators(allDis, dispatch)
    let [swIndex, setSwIndex] = useState(0)

    const allFlagClick = (e:any) => {
        e.stopPropagation();
        dis.allImgFlag(false)
    }
    const swClick = (index: number) => {
        props.IN(index)
        setSwIndex(index)
        dis.swFlag(true)
    }
    
    return <div 
            className={`${style.twoDiv} animate__animated animate__fadeInUpBig`} >
        <button onClick={(e:any) => allFlagClick(e)} className={style.allFlag}>关闭</button>
        <Loazing getAllClickData={getAllClickData['List']}>
            <section>
                {
                    getAllClickData && getAllClickData.List && getAllClickData['List'].map((item: getAllClickDataItemType, index: number) => {
                        // return <LazyLoad key={index}>
                        //     <img data-src={item.Url.replace("{0}", "3")} src={srcs} alt="" onClick={() => swClick(index)} />
                        // </LazyLoad>
                        return <img data-src={item.Url.replace("{0}", "3")} src={srcs} alt="" onClick={() => swClick(index)} key={index} />
                    })
                }
            </section>
        </Loazing>
        {
            swFlag ? <SwiperImg swIndex={swIndex}></SwiperImg> : ''
        }
    </div>

}
export default AllImg